<template>
  <section class="center-container plant-box">
    <plant-header :modelValue="modelValue"></plant-header>
    <div class="content-box">
      <ul class="list-box">
        <li v-for="item in listData" :key="item.t_content_pk">
          <router-link :to="getRowUrl($route.params, item)" class="list-link">
            <aside>
              <p>{{ item.publish_time.substring(8, 10) }}</p>
              <p>{{ item.publish_time.substring(0, 7) }}</p>
            </aside>
            <hgroup>
              <h3 :title="item.title">{{ item.title }}</h3>
              <h4 :title="item.subtitle">{{ item.subtitle }}</h4>
            </hgroup>
          </router-link>
        </li>
      </ul>
      <slot :swiperData="swiperData">
        <header-swiper :modelValue="swiperData"></header-swiper>
      </slot>
    </div>
  </section>
</template>

<script>
import HeaderSwiper from "@/components/public/header-swiper.vue";
import { secondPlant } from "@/util/mixin";
export default {
  mixins: [secondPlant],
  components: { HeaderSwiper },
  data() {
    return {
      listRows: 3
    }
  }
};
</script>

<style scoped>
/deep/.swiper {
  width: 490px;
  height: 340px;
}

/deep/.swiper-pagination {
  bottom: 30px;
}

.content-box {
  margin-top: 10px;
  display: flex;
}

.list-box {
  margin-right: 10px;
  flex-grow: 1;
}

.list-link {
  display: flex;
  align-items: center;
  padding: 25px 0px;
  border-radius: 15px;
}

.list-link:hover {
  background-color: var(--base-color);
  color: #fff;
}

.list-link:hover>aside {
  border-right: 1px solid #fff;
}

.list-link>aside {
  width: 100px;
  color: #aaa;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 0px 15px;
  margin-right: 15px;
}

.list-link>aside>p:nth-child(1) {
  font-size: 200%;
  font-weight: 700;
}

.list-link>aside>p:nth-child(2) {
  font-weight:900;
}

.list-link>hgroup {
  padding-right: 15px;
}

.list-link>hgroup>h3 {
  height: 24px;
  line-height: 24px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.list-link>hgroup>h4 {
  height: 40px;
  line-height: 20px;
  font-size: 15px;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>